<template>
  <div>
    <!--添加课程对话框 visible.sync：是否显示对话框；before-close：关闭时运行-->
    <el-dialog title="添加授课课程" :visible.sync="btn" width="40%" :before-close="handleClose">
      <!--表单结构 model：绑定值为courseDataTemp-->
      <el-form  label-width="80px">
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //变量区
  data(){
    return{
      courseDataTemp:{
        name:null,//课程名称
        notes:null,//备注
        credit:null,//学分
        periods:null,//课时
      },
    }
  },
  //父组件传递的变量
  props: {
    btn:Boolean,
  },
  //监听变量的变化
  watch: {
    //逻辑入口 数据变化，父组件触动
    btn(newValue){

    }
  },
  //函数区
  methods: {
    //关闭对话框确认框
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('off', false);
        })
    },
    //取消对话框
    cancellation(){
      this.$emit('off', false);
    },
    //确定对话框
    determine(){
      this.$emit('off', false);
    },
  },
  //组件区
  components: {
  },
}
</script>

<style scoped>
.img-shell{
  display: flex;
  justify-content: center;
  position: relative;
}
.img{
  width: 70%;
  aspect-ratio:1/1;
  border: 1px solid rgb(198, 198, 201);
  border-radius: 3%;

}
.img-btn-shell{
  position: absolute;
  width: 70%;
  aspect-ratio:1/1;
  display: flex;
  .img-btn{
    display: none;
  }
}
.img-btn-shell:hover{
  position: absolute;
  width: 70%;
  aspect-ratio:1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-btn{
    display: flex;
  }
}
</style>
